<template>
  <div class="CompanyData">
    <table ref="dataTable" class="table" cellpadding="10" cellspacing="0">
      <thead>
        <tr>
          <td colspan="6" class="tableTitle">平台{{month}}月份每日报表({{date}})</td>
        </tr>
        <tr>
          <td>日期</td>
          <td>货主名称</td>
          <td>日发车量(辆)</td>
          <td>日运费(元)</td>
          <td>月累计发车量(辆)</td>
          <td>月累计运费(元)</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in dataList" :key="index">
          <td v-if="index == 0" :rowspan="total">{{date.split("-").slice(1).join("-")}}</td>
          <td>{{item.company_name}}</td>
          <td>{{item.nowDriver}}</td>
          <td>{{item.nowTotalPrice}}</td>
          <td>{{item.monthTotalDriver}}</td>
          <td>{{item.monthTotalPrice}}</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>合计</td>
          <td></td>
          <td class="all">{{totalData.nowDriverAll}}</td>
          <td class="all">{{totalData.nowTotalPriceAll}}</td>
          <td class="all">{{totalData.monthTotalDriverAll}}</td>
          <td class="all">{{totalData.monthTotalPriceAll}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { getCompanyDataSummary } from "@/api/set";
import Big from "big.js";
export default {
  name: "CompanyData",
  props: {
    date: {
      type: String,
      default: ""
    },
    form:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      month: "",
      total: 0,
      dataList: [],
      totalData: {
        nowDriverAll: 0,
        nowTotalPriceAll: 0,
        monthTotalDriverAll:0,
        monthTotalPriceAll: 0
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      if (!this.date) return;
      this.month = Number(this.date.split("-")[1]);
      let result = await getCompanyDataSummary({
        time: this.date,
        area:this.form.area
      });
      if (result.code == 200) {
        let date = this.date
          .split("-")
          .slice(1)
          .join("-");
        this.dataList = result.data;
        this.total = this.dataList.length;

        this.dataList.forEach((c, i) => {
          this.totalData.nowDriverAll =  
          new Big(this.totalData.nowDriverAll)
          .plus(new Big(c.nowDriver)).toNumber();

          this.totalData.nowTotalPriceAll =
          new Big(this.totalData.nowTotalPriceAll)
          .plus(new Big(c.nowTotalPrice)).toNumber();

          this.totalData.monthTotalDriverAll = 
          new Big(this.totalData.monthTotalDriverAll)
          .plus(new Big(c.monthTotalDriver)).toNumber();

          this.totalData.monthTotalPriceAll = 
          new Big(this.totalData.monthTotalPriceAll)
          .plus(new Big(c.monthTotalPrice)).toNumber();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.CompanyData {
  .table {
    width: 100%;
    border-right: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
    td {
      border-left: 1px solid #adadad;
      border-top: 1px solid #adadad;
      padding: 10px;
      text-align: center;
    }
    .td {
      border-left: 1px solid #adadad;
      border-top: 1px solid #adadad;
      padding: 10px;
      text-align: center;
    }
    .all {
      color: $theme-Danger;
    }
  }
}
</style>
